<template>
  <div class="app-container">
    <el-container>
      <el-main>

        <el-form class="custom-form" style="display:flex;  justify-content: space-between;  flex-wrap: wrap;" :model="getpage" label-width="40px">
          <el-form-item label="线路编号:">
            <el-input v-model="getpage.number" style="width: 300px; margin-left:40px;" placeholder="请输入线路编号" />
          </el-form-item>
          <el-form-item label="线路名称:">
            <el-input v-model="getpage.name" style="width: 300px;margin-left:40px;" placeholder="请输入线路名称" />
          </el-form-item>

          <el-form-item label="起始地机构:" class="no-wrap-text">
            <el-cascader
              ref="formRef"
              :options="treeData"
              :props="defaultProps"
              clearable
              expand-trigger="hover"
              placeholder="请选择起始地机构"
              style="width: 300px; margin-left: 40px;"
              @change="handleNodeClick"
            />
          </el-form-item>
          <el-form-item label="目的地机构:" class="no-wrap-text">
            <el-cascader

              :options="treeData"
              :props="defaultProps"
              clearable
              expand-trigger="hover"
              placeholder="请选择起始地机构"
              style="width: 300px; margin-left: 40px;"
              @change="handleNodeClick"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="searchList">搜索</el-button>
            <el-button @click="resetForm">重置</el-button>

          </el-form-item>

        </el-form>
      </el-main>

    </el-container>
    <el-container>
      <el-main>
        <el-button type="danger" @click="addLine">新增线路</el-button>
        <el-button @click="configuration">成本设置</el-button>

        <el-table
          :header-cell-style="headerCellStyle"
          size="500"
          border
          :fit="true"
          stripe
          :data="tableData"
          style="width: 100%; margin-top:30px;"
          @expand-change="handleExpand"
        >
          <el-table-column type="expand">

            <el-form label-position="left" inline class="demo-table-expand">
              <el-table
                :data="tableData2"
                show-empty
                empty-text="暂无数据"
                :fit="true"
                :header-cell-style="headerCellStyle"
                height="300"
                width="600"
              >
                <el-table-column

                  label="车次名称"
                  width="140"
                />
                <el-table-column

                  label="发车频次"
                  width="140"
                />
                <el-table-column

                  label="到达时间"
                />
                <el-table-column

                  label="车辆安排"
                />
                <el-table-column

                  label="司机安排"
                />
                <el-table-column

                  label="操作"
                />
              </el-table>
            </el-form>

          </el-table-column>
          <el-table-column
            label="线路编号"
            prop="number"
          />
          <el-table-column
            label="线路名称"
            prop="name"
          />

          <el-table-column
            label="线路类型"
            prop="type"
          >
            <template v-slot="{row}">
              {{ row.type===1?"干线":row.type===2?"支线":row.type===3?"接驳路线":'' }}
            </template>
          </el-table-column>

          <el-table-column
            label="起始地机构"
            prop="startOrganName"
          />
          <el-table-column
            label="目的地机构"
            prop="endOrganName"
          />
          <el-table-column
            label="距离(千米)"
            prop="distance"
          />
          <el-table-column
            label="成本(元)"
            prop="cost"
          />
          <el-table-column
            label="预计时间(分钟)"
            prop="time"
          />
          <el-table-column
            label="操作"
            width="200"
          >
            <template v-slot="{row}">
              <el-button
                type="text"
                size="small"
                @click="editlineshow(row.id)"
              >
                修改
              </el-button>
              <el-button

                type="text"
                size="small"
                @click="delline(row)"
              >
                删除
              </el-button>

              <el-button
                type="text"
                size="small"
                @click="addcarline(row)"
              >
                增加车次
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            :current-page="getpage.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="getpage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-main>

    </el-container>
    <!-- 新增线路弹框 -->
    <el-dialog title="新增线路" custom-class="customclass" width="500" :visible.sync="dialogFormVisible">
      <el-form :model="manual">
        <el-form-item label="线路编号：">
          <el-input v-model="manual.number" autocomplete="off" style="width: 350px;" />
        </el-form-item>
        <el-form-item label="线路名称:">
          <el-input v-model="manual.name" autocomplete="off" style="width: 350px;" />
        </el-form-item>
        <el-form-item label="线路类型:">
          <el-select v-model="manual.type" style="width: 350px;" placeholder="请选择">

            <el-option
              label="干线"
              :value="1"
            />
            <el-option
              label="支线"
              :value="2"
            />
            <el-option
              label="接驳路线"
              :value="3"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="起始地机构:" class="no-wrap-text">
          <el-cascader

            :options="treeData"
            :props="defaultProps"
            clearable
            expand-trigger="hover"
            placeholder="请选择起始地机构"
            style="width: 320px; margin-left: 20px;"
            @change="handleNode"
          />
        </el-form-item>
        <el-form-item label="目的地机构:" class="no-wrap-text">
          <el-cascader

            :options="treeData"
            :props="defaultProps"
            clearable
            expand-trigger="hover"
            placeholder="请选择目的地机构"
            style="width: 350px; margin-left: 20px;"
            @change="handleNode1"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendinfo">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改路线弹框 -->
    <el-dialog title="编辑路线" custom-class="customclass" width="500" :visible.sync="dialogFormVisible3">
      <el-form :model="manual5">
        <el-form-item label="线路编号：">
          <el-input v-model="manual5.number" autocomplete="off" style="width: 350px;" />
        </el-form-item>

        <el-form-item label="线路名称:">
          <el-input v-model="manual5.name" autocomplete="off" style="width: 350px;" />
        </el-form-item>

        <el-form-item label="线路类型:">
          <el-select v-model="manual5.type" :disabled="true" style="width: 350px;" placeholder="请选择">

            <el-option
              label="干线"
              :value="1"
            />
            <el-option
              label="支线"
              :value="2"
            />
            <el-option
              label="接驳路线"
              :value="3"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="起始地机构:" class="no-wrap-text">

          <el-select v-model="manual5.startOrganName" :disabled="true" style="width: 350px;" placeholder="请选择" />

        </el-form-item>

        <el-form-item label="目的地机构:" class="no-wrap-text">
          <el-select v-model="manual5.endOrganName" :disabled="true" style="width: 350px;" placeholder="请选择" />
        </el-form-item>

        <el-form-item label="距离：">
          <el-input v-model="manual5.distance" style="width: 350px;">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;color:black">千米</i>
          </el-input>

        </el-form-item>

        <el-form-item label="成本：">
          <el-input v-model="manual5.cost" autocomplete="off" style="width: 350px;">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;color:black">元</i>
          </el-input>

        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendinfo3">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 成本弹框 -->
    <el-dialog title="成本设置" custom-class="customclass" width="500" :visible.sync="dialogFormVisible2">
      <el-form ref="cbform" :model="manual2" :rules="rules">
        <el-form-item label="干线：" prop="numberField">
          <el-input v-model="manual2.cost1" autocomplete="off" style="width: 350px;" />
        </el-form-item>
        <el-form-item label="支线:" prop="numberField">
          <el-input v-model="manual2.cost2" autocomplete="off" style="width: 350px;" />
        </el-form-item>
        <el-form-item label="接驳:" prop="numberField">
          <el-input v-model="manual2.cost3" autocomplete="off" style="width: 350px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendinfo2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { treeList } from '@/api/task.js'
import { getlinelist, getcarlist, updatecar, getdetaillist, addlinelist, delline, configuration, sendconfiguration } from '@/api/line.js'
import { transListToTreeData } from '@/utils/index'

export default {
  data() {
    return {
      cuid: null,
      total: null,
      manual2: {
        cost1: null,
        cost2: null,
        cost3: null

      },
      rules: {
        numberField: [
          { required: true, message: '字段不能为空', trigger: 'blur' },
          { type: 'number', message: '字段必须为数字', trigger: 'blur' }
        ]
      },
      manual3: [
        {
          cost: null,
          transportLineType: null
        }, {
          cost: null,
          transportLineType: null
        }, {
          cost: null,
          transportLineType: null
        }
      ],
      manual4: {
        transportLineType1: null,
        transportLineType2: null,
        transportLineType3: null

      },
      // 添加路线表单
      manual: {
        cost: null,
        created: null,
        distance: null,
        endOrganId: null,
        endOrganName: '',
        extra: '',
        id: null,
        name: '',
        number: '',
        startOrganId: null,
        startOrganName: '',
        time: null,
        type: null,
        updated: null
      },

      // 编辑表单
      manual5: {
        cost: null,
        created: null,
        distance: null,
        endOrganId: null,
        endOrganName: '',
        extra: '',
        id: null,
        name: '',
        number: '',
        startOrganId: null,
        startOrganName: '',
        time: null,
        type: null,
        updated: null
      },
      // 增加车次
      manual6: {
        departureTime: null,
        estimatedTime: null,
        id: null,
        name: '',
        period: null,
        periodName: '',
        transportLineId: null
      },

      dialogFormVisible3: false,
      dialogFormVisible2: false,
      dialogFormVisible: false,
      treeData: [],
      tableData: [],
      tableData2: [],

      getpage: {
        endOrganId: null,
        name: '',
        number: '',
        page: 1,
        pageSize: 10,
        startOrganId: null
      },
      defaultProps: {
        label: 'name',
        value: 'id'
      }
    }
  },
  created() {
    this.treeList()
    this.getlinelist()
    // this.getcarlist()
    // 成本
    // this.configuration()
  },
  methods: {
    // 获取车次列表

    async handleExpand(row) {
      await getcarlist(Number(row.id))
    },

    // 确认修改
    async sendinfo3() {
      await updatecar(this.manual5)
      this.getlinelist()

      this.dialogFormVisible3 = false
      this.$message.success('修改线路成功')
    },
    // 路线修改
    async editlineshow(id) {
      this.cuid = id
      const res = await getdetaillist(id)

      this.manual5 = res
      this.dialogFormVisible3 = true
    },
    // 成本修改提交
    async sendinfo2() {
      this.manual3[0].cost = this.manual2.cost1
      this.manual3[1].cost = this.manual2.cost2
      this.manual3[2].cost = this.manual2.cost3
      this.manual3[0].transportLineType = this.manual4.transportLineType1
      this.manual3[1].transportLineType = this.manual4.transportLineType2
      this.manual3[2].transportLineType = this.manual4.transportLineType3

      await sendconfiguration(this.manual3)
      this.dialogFormVisible2 = false
      this.$refs.cbform.resetFields()
      this.$message.success('修改成本成功')
    },
    // 获取成本信息
    async configuration() {
      const res = await configuration()

      this.manual2.cost1 = res[0].cost
      this.manual2.cost2 = res[1].cost
      this.manual2.cost3 = res[2].cost
      this.manual4.transportLineType1 = res[0].transportLineType
      this.manual4.transportLineType2 = res[1].transportLineType
      this.manual4.transportLineType3 = res[2].transportLineType

      this.dialogFormVisible2 = true
    },
    // 获取车次列表
    // async getcarlist() {
    //   const res = await getcarlist()
    // },

    // 删除功能
    async delline(row) {
      await delline(Number(row.id))
      this.$message.success('删除成功')
    },
    // 新增确定提交
    async sendinfo() {
      this.dialogFormVisible = false
      await addlinelist(this.manual)
    },
    // 新增弹框的树形图
    handleNode(value) {
      this.manual.startOrganId = Number(value[1])
    },
    handleNode1(value) {
      this.manual.endOrganId = Number(value[1])
    },
    // 切换页码
    handleCurrentChange(num) {
      this.getpage.page = num
      this.getTaskPage()
    },
    // 新增弹框
    addLine() {
      this.dialogFormVisible = true
    },
    headerCellStyle() {
      return ' backgroundColor: #f4f4fc; '
    },
    // 获取路线分页数据
    async  getlinelist() {
      const msg = await getlinelist(this.getpage)

      this.tableData = msg.items
      this.total = Number(msg.counts)
    },
    // 搜索
    searchList() {
      this.getlinelist()
    },
    // 重置表单
    resetForm() {
      this.getpage = {
        endOrganId: null,
        name: '',
        number: '',
        page: 1,
        pageSize: 10,
        startOrganId: null
      }
    },
    async treeList() {
      const msg = await treeList()
      this.treeData = transListToTreeData(JSON.parse(msg), '0')
    },
    // 目的地id
    handleNodeClick2(value) {
      this.getpage.endOrganId = value[1]
    },
    // 起始地id
    handleNodeClick(value) {
      this.getpage.startOrganId = value[1]
    }
  }

}
</script>

<style>
.custom-form .el-form-item__label {
  white-space: nowrap;

}
.el-main {
    background-color: #ffffff;
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
    margin-top: 25px;

  }
  .no-wrap-text label {
  white-space: nowrap;
}

.customclass{
  width: 600px !important;
}
</style>
